<template>
  <div class="material" style="padding:40px;">
    <el-card shadow="never">
      <div slot="header">
        <el-upload
          ref="materialImgUpload"
          action="/lejuAdmin/material/uploadFileOssSave"
          :headers="token"
          :on-success="uploadCoverImgSuccess"
          :before-upload="beforeCoverImgUpload"
          multiple
          :limit="2"
        >
          <el-button size="small" type="primary">点击上传素材</el-button>
          <div slot="tip" class="el-upload__tip">只能上传图片文件,且不超过1.5M</div>

        </el-upload>
      </div>
      <div class="material-list">
        <el-card v-for="item in materialList" :key="item.id" class="material-list-item" shadow="always">
          <div slot="header">
            <span style="font-size:12px;">创建时间：{{ item.createTime }}</span>
          </div>
          <el-image
            class="material-list-item-img"
            :src="item.ossUrl"
            :preview-src-list="srcList"
          />
          <el-button class="material-list-item-btn" type="danger" size="mini" @click="deleteMaterial(item.id)">删除</el-button>

        </el-card>
        <span class="span" />
        <span class="span" />

      </div>
    </el-card>
    <el-pagination
      style="margin-top:10px;"
      :current-page.sync="pagination.start"
      :page-sizes="pagination.sizes"
      :page-size="pagination.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      @size-change="sizeChange"
      @current-change="currentChange"
    />

  </div>
</template>

<script>
import mix from '@/mixin'
import {
  findMaterialByPage as findMaterialByPage,
  delMaterial as delMaterialApi
} from '@/api/content/index'
export default {
  name: 'Material',
  mixins: [mix],
  data() {
    return {
      materialList: [],
      srcList: [] // 图片大图预览
    }
  },
  created() {
    this.getMaterialList()
  },
  methods: {
    // 更改当前页数
    currentChange(e) {
      this.pagination.start = e
      this.getMaterialList()
    },
    // 更改limit
    sizeChange(e) {
      this.pagination.limit = e
      this.pagination.start = 1
      this.getMaterialList()
    },
    // 删除素材
    deleteMaterial(id) {
      delMaterialApi(id)
        .then(res => {
          this.getMaterialList()
        })
    },
    // 获取素材列表
    getMaterialList() {
      findMaterialByPage(this.pagination.start, this.pagination.limit)
        .then(res => {
          const { message, data, success } = res
          if (success) {
            this.pagination.total = data.total
            this.materialList = data.rows
            this.srcList = data.rows.map(ele => ele.ossUrl)
          } else {
            this.$message.error(message)
          }
        })
    },
    // 文件上传成功时候的钩子函数
    uploadCoverImgSuccess(res, file, fileList) {
      const { success, message } = res
      if (success) {
        // this.form.coverImg = data.ossUrl
        this.$refs.materialImgUpload.clearFiles()
        this.pagination.start = 1
        this.getMaterialList()
      } else {
        this.$message.error(message)
      }
    },
    // 在文件上传之前的钩子函数
    beforeCoverImgUpload(file) {
      // const isJPG = file.type === 'image/jpeg'
      const isLt1dot5M = file.size / 1024 / 1024 < 1.5
      var reg = /^image\/(jpe?g|png|webp|gif)$/

      const isImage = reg.test(file.type)
      if (!isImage) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt1dot5M) {
        this.$message.error('上传头像图片大小不能超过 1.5MB!')
      }
      return isImage && isLt1dot5M
    }
  }
}
</script>

<style lang="scss" scoped>
.material{
  &-list{
    display: flex;
    justify-content: space-evenly;
    align-content: flex-start;
    flex-wrap: wrap;
    .span{
      width: 255px;
      height: 0;
      display:block;
    }
   ::v-deep &-item{
      width: 255px;
      height: 397px;
      margin-bottom: 20px;
      &-img{
        display: block;
        width: 214px;
        height: 250px;
      }
      &-btn{
        margin-left: 255px;
        margin-top: 10px;
        transform: translateX(-200%);
      }
    }
  }
}
</style>
